<template>
    <i>
        <svg :class="svgClass" aria-hidden="true">
            <use :xlink:href="iconName"></use>
        </svg> 
    </i>
</template>

<script>
//3.0 
/* import {ref, computed} from "@vue/composition-api"
    export default {
        name: "iconsvg",
        props: {
            iconClass: {
                type: String,
                default: '',
            },
            className: {
                type: String,
                default: ''

            }
        },
        setup(props) {
            const msg = ref('你好');

            const iconName = computed(() => `#icon-${props.iconClass}`);
            const svgClass = computed(() => {
                if (props.className) {
                    return `svg-icon ${props.iconClass}`
                } else {
                    return `svg-icon`
                }
            });

            return {
                msg,
                iconName,
                svgClass
            }
        }
    } */
//2.0 
    export default {
        name: "iconsvg",
        props: {
            iconClass: {
                type: String,
                default: '',
            },
            className: {
                type: String,
                default: ''

            }
        },
        computed:{
            iconName(){
                return `#icon-${this.iconClass}`
            },
            svgClass(){
                if (this.className) {
                    return `svg-icon ${this.iconClass}`
                } else {
                    return `svg-icon`
                }
            }

        }
    } 

</script>

<style scoped lang="scss">
        .svg-icon {
            width: 1em;
            height: 1em;
            font-size: 16px;
            
        }

</style>